{% extends 'base.html' %}

{% block title %} 用户注册 {% endblock title %}

{% block links %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/user/register.css') }}">
    <script src="{{ url_for('static', filename='js/user/register.js') }}"></script>
{% endblock %}

{% block content %}
    <div id="container">
        <div class="w">
            <h1>用户注册</h1>
            <div class="form">
                <form action="{{ url_for('user.register') }}" method="post">
                    <div class="form-group">
                        <label for="inputUsername" class="form-label">用户名</label>
                        <div class="form-input">
                            <input name="username" minlength="2" maxlength="10" required type="text" id="inputUsername" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="form-label">密码</label>
                        <div class="form-input">
                            <input name="password" minlength="2" maxlength="16" required type="password" id="inputPassword" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputConfire" class="form-label">确认密码</label>
                        <div class="form-input">
                            <input name="pwd" required type="password" id="inputConfire" placeholder="请确认密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPhone" class="form-label">手机号码</label>
                        <div class="form-input">
                            <input name="phone" required type="tel" id="inputPhone" placeholder="请输入手机号码">
                            <span class="tips"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail" class="form-label">邮箱</label>
                        <div class="form-input">
                            <input name="email" required type="email" id="inputEmail" placeholder="请输入邮箱">
                            <span class="tips"></span>
                        </div>
                    </div>
                    <div class="agreement">
                        <input type="checkbox" required> 我已阅读并同意
                        <a href="{{ url_for('user.must_protocol') }}" target="_blank">《本站霸王条款》</a>
                    </div>
                    <div class="form-btn">
                        <button type="submit" class="btn-primary">Sign in</button>
                        <button type="reset" class="btn-primary">Reset</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        $('#inputPhone').blur(function () {
            let phoneNum = $(this).val()
            let spanEle = $(this).next('span')
            if (phoneNum.length === 11) {
                spanEle.text('')
                $.get(
                    '{{ url_for("user.check_phone") }}',
                    {phoneNum},
                    function (data) {
                        console.log(data)
                        console.log(data.url)
                        if (data.status !== 200) {
                            spanEle.css({'color': '#ff0011', 'font-size': 12})
                            spanEle.html(data.msg)
                        }
                    }
                )
            } else {
                spanEle.css({'color': '#ff0011', 'font-size': 12})
                spanEle.html('手机号码格式不规范')
            }
        });

        $('#inputEmail').blur(function () {
            let email = $(this).val()
            let spanEle = $(this).next('span')
            if (/^[1-9]\d{3,10}@qq\.com$/.test(email)) {
                spanEle.text('')
                $.get(
                    '{{ url_for("user.check_email") }}',
                    {email},
                    function (data) {
                        console.log(data)
                        console.log(data.url)
                        if (data.code !== 200) {
                            spanEle.css({'color': '#ff0011', 'font-size': 12})
                            spanEle.html(data.msg)
                        }
                    }
                )
            } else {
                spanEle.css({'color': '#ff0011', 'font-size': 12})
                spanEle.html('qq邮箱格式不对')
            }
        });
    </script>
{% endblock %}